<!--
 * @Descripttion: 巡视统计
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-18 09:54:26
 * @LastEditTime: 2021-08-21 15:23:48
-->
<template>
    <div id="tourStatistics">
        <!-- <van-nav-bar  title="计划巡视" left-arrow @click-left="back" /> -->
        <Theader title="计划巡视" :headerStyle="{color:'#333',backgroundColor: '#fff',}" :textStyle="{color:'#333'}"
            :titleStyle="{color:'#333'}">
            <template slot="header_arrow">
                <van-icon size="17" name="arrow-left" @click="back" />
            </template>
        </Theader>
        <div class="out-main mt3rem">
            <div class="in-main" v-for="(item,i) in tourList" :key="i">
                <div class="flex-btw">
                    <span class="blodText">{{item.category}}</span>
                    <div>
                        <span class="dynamicText">本年：</span>
                        <span :class="item.category | classFilter">{{item.numYear}}</span>
                        <span class="dynamicText">次</span>
                    </div>
                </div>
                <van-row>
                    <van-col span="8">{{item.numDay}}</van-col>
                    <van-col span="8">{{item.numWeek}}</van-col>
                    <van-col span="8">{{item.numMonth}}</van-col>
                </van-row>
                <van-row>
                    <van-col span="8">本日</van-col>
                    <van-col span="8">本周</van-col>
                    <van-col span="8">本月</van-col>
                </van-row>
            </div>
            <div class="in-main">
                <van-cell title="统计算法："></van-cell>
                <van-cell title="本年：按照本年已完成巡视数量统计；"></van-cell>
                <van-cell title="本日：按照本日已完成巡视数量统计；"></van-cell>
                <van-cell title="本周：按照本周已完成巡视数量统计；"></van-cell>
                <van-cell title="本月：按照本月已完成巡视数量统计。"></van-cell>
            </div>
        </div>
    </div>
</template>

<script>

    import Theader from "../component/header"
    export default {
        components: {
            Theader
        },
        data() {
            return {
                tourList: [{
                    category: '全面巡视',
                    numYear: '35',
                    numDay: '0',
                    numWeek: '1',
                    numMonth: '4',
                }, {
                    category: '例行巡视',
                    numYear: '35',
                    numDay: '0',
                    numWeek: '3',
                    numMonth: '4',
                }, {
                    category: '熄灯巡视',
                    numYear: '26',
                    numDay: '2',
                    numWeek: '3',
                    numMonth: '1',
                }, {
                    category: '特殊巡视',
                    numYear: '17',
                    numDay: '0',
                    numWeek: '2',
                    numMonth: '4',
                }]
            }
        },
        filters: {
            classFilter(c) {
                if (c == '全面巡视') return 'tourAll'
                if (c == '例行巡视') return 'tourRoutine'
                if (c == '熄灯巡视') return 'tourEnd'
                if (c == '特殊巡视') return 'tourSpecial'
            }
        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.go(-1)
                this.$router.go(-1)
            },
        }
    }
</script>

<style>
    #tourStatistics {
        font-size: 0.8125rem;
    }

    .mt3rem{
        margin-top: 3rem;
    }

    #tourStatistics .out-main {
        height: calc(100vh - 4rem);
        padding: 9px;
        background-color: #F5F6F7;
    }

    #tourStatistics .in-main {
        padding: 10px;
        background-color: #fff;
        margin-bottom: 10px;
        border-radius: 5px;
        color: #666666;
    }

    #tourStatistics .flex-btw {
        display: flex;
        justify-content: space-between;
        padding-bottom: 1rem;
    }

    #tourStatistics .blodText {
        font-weight: 600;
        font-size: 1.0625em;
    }

    #tourStatistics .van-row {
        font-size: 0.8125rem;
    }

    #tourStatistics .van-cell {
        padding: 0;
    }

    #tourStatistics .tourAll {
        font-size: 1.25rem;
        color: rgb(140, 136, 228);
    }

    #tourStatistics .tourRoutine {
        font-size: 1.25rem;
        color: #0EB295;
    }

    #tourStatistics .tourEnd {
        font-size: 1.25rem;
        color: rgb(273, 137, 66);
    }

    #tourStatistics .tourSpecial {
        font-size: 1.25rem;
        color: rgb(82, 132, 214);
    }
</style>